import * as ANTD_ICONS from '@ant-design/icons';
import { Tabs, Button, message } from 'antd';
import { useEffect, useState } from 'react';

import requestInstance from '@/service/fetch';
import userStore, { IUserInfo } from '@/store/userStore';

import styles from './index.module.scss';

interface ITag {
  id: number;
  title: string;
  icon: string;
  follow_count: number;
  article_count: number;
  users: IUserInfo[];
}

const Tag = () => {
  const userInfo = userStore(({ userInfo }) => userInfo);
  const [followTags, setFollowTags] = useState<ITag[]>([]);
  const [allTags, setAllTags] = useState<ITag[]>([]);

  useEffect(() => {
    getData()
  }, [])

  const getData = async () => {
    const result: any = await requestInstance.get('/api/tag/get');
    if (result.code === 200) {
      const { followTags = [], allTags = [] } = result?.data || {};
      setFollowTags(followTags);
      setAllTags(allTags);
    }
  }

  const handleUnFollow = async (tagId: number) => {
    const result: any = await requestInstance.post('/api/tag/follow', {
      type: 'unfollow',
      tagId
    })

    if (result.code === 200) {
      message.success('取消关注成功')
      getData()
    } else {
      message.error('取消关注失败')
    }
  }
  const handleFollow = async (tagId: number) => {
    if (!userInfo.userId) {
      message.warning('请先登录')
      return
    }

    const result: any = await requestInstance.post('/api/tag/follow', {
      type: 'follow',
      tagId
    })

    if (result.code === 200) {
      message.success('关注成功')
      getData()
    } else {
      message.error('关注失败')
    }
  }

  return (
    <div className="content-layout">
      <Tabs defaultActiveKey="all">
        <Tabs.TabPane
          tab="已关注标签"
          key="follow"
          className={styles.tags}
        >
          {
            followTags.map((tag) => (
              <div key={tag?.title} className={styles.tagWrapper}>
                <div>{(ANTD_ICONS as any)[tag?.icon]?.render()}</div>
                <div className={styles.title}>{tag?.title}</div>
                <div>{tag?.follow_count} 关注 {tag?.article_count} 文章</div>
                {
                  tag?.users?.find((user) => Number(user?.id) === Number(userInfo.userId)) ? (
                    <Button type='primary' onClick={() => handleUnFollow(tag?.id)}>已关注</Button>
                  ) : (
                    <Button onClick={() => handleFollow(tag?.id)}>关注</Button>
                  )
                }
              </div>
            ))
          }
        </Tabs.TabPane>
        <Tabs.TabPane tab="全部标签" key="all" className={styles.tags}>
          {
            allTags?.map(tag => (
              <div key={tag?.title} className={styles.tagWrapper}>
                <div>{(ANTD_ICONS as any)[tag?.icon]?.render()}</div>
                <div className={styles.title}>{tag?.title}</div>
                <div>{tag?.follow_count} 关注 {tag?.article_count} 文章</div>
                {
                  tag?.users?.find((user) => Number(user?.id) === Number(userInfo.userId)) ? (
                    <Button type='primary' onClick={() => handleUnFollow(tag?.id)}>已关注</Button>
                  ) : (
                    <Button onClick={() => handleFollow(tag?.id)}>关注</Button>
                  )
                }
              </div>
            ))
          }
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Tag;
